import { Component,Prop,Emit,Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { dellongInsuranceProcess ,delDayInsuranceProcess } from '@/api/insurance/period/index' 
import type { LongInsuranceCaseListDto, ReportCaseResultDto} from '@/api/insurance/period/types'
import { Button, message, Modal, Timeline, TimelineItem } from 'ant-design-vue'
import { DeleteOutlined} from '@ant-design/icons-vue'
// < />
import { dateFormat } from '@/utils/util'
@Component
export class TableDetailView extends Render { 
    @Prop() type!: string
    @Prop() item!: LongInsuranceCaseListDto<ReportCaseResultDto>
    @Prop() modelValue!: any
    @Prop() aaa!: string
    
    @Emit('deleteChange') deleteChange() {
        return
    }
    
    async onDelProgress(id: number) {
        // '确定删除吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
        const res = await Modal.confirm({
            title: '提示',
            content: '确定删除吗？',
            okText: '确定',
            cancelText:'取消'
        })
        console.log('看看回调信息', res)
        return
        // if (res === 'confirm' && this.type === 'long') {
        //     await dellongInsuranceProcess(id)
        //     message.success('删除成功')
        //     await this.deleteChange()
           
        // } else if (res === 'confirm' && this.type === 'day') {
        //     await delDayInsuranceProcess(id)
        //     message.success('删除成功')
        //     await this.deleteChange()
        // }
    }

    render() {
        return (
            <>
                <div class="w-full px-9 py-16">
                    <div>{ this.aaa }</div>
                    <div class="flex justify-between items-center" onClick={() => { this.onDelProgress(1) }}>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">出险时间:</div><span> { this.item.outDangerDate }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">出险地点:</div><span> { this.item.outDangerPlace }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">出险人手机号:</div><span> { this.item.outDangerPhone }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">出险人身份证:</div><span> { this.item.outDangerIdCardNo }</span></div>
                    </div>
                    <div class="flex justify-between items-center">
                        {
                            this.type === 'long' ?
                                <div class="flex-1 flex items-center">
                                    <div class=" text-right text-black-300 text-sm mr-2 ">投保日期:</div>
                                    <span> {this.item.insurStartTime}</span>
                                </div>
                                :
                                <div class="flex-1 flex items-center">
                                    <div class=" text-right text-black-300 text-sm mr-2 ">保障区间:</div>
                                    <span> {this.item.insureDate} 至 { dateFormat(new Date(this.item.insureDate).getTime() + 86400000, 'YYYY-MM-DD HH:mm:ss')}</span>
                                </div>
                        }
                    
                        <div class="flex-1 flex items-center">
                            <div class=" text-right text-black-300 text-sm mr-2 ">投保方案:</div>
                            <span> { this.type === 'long' ?this.item.companyPlanName : this.item.reportPlan}</span>
                        </div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">报案人手机号</div><span> { this.item.reportPhone }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">事故类型</div><span> { this.item.accidentType === 1 ? '意外' : '工伤' }</span></div>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">严重伤情:</div><span> { this.item.hurtStatus === 1 ? '是' : '不是' }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">报案材料:</div><span> { this.item.isUploaded ? '已上传' : '未上传' }</span></div>
                        <div class={`flex-1 flex items-center ${ this.type === 'long'? '' : 'opacity-0' } `}>
                            <div class=" text-right text-black-300 text-sm mr-2 ">保司工种:</div>
                            <span> {this.item.originName}</span>
                        </div>
                        <div class="flex-1 flex items-center">
                            <div class=" text-right text-black-300 text-sm mr-2 ">事故视频:</div>
                            {
                                this.type === 'long' ? this.item.params?.fileUrl?.map((item,index) => { 
                                    return (
                                        <div class="flex items-center mx-1">
                                            <div class="text-blue-light-100 cursor-pointer" onClick={() => { window.open(item.fileUrl) }}>
                                            附件{ index + 1 }
                                            </div>
                                        </div>
                                    )
                                })
                                    :this.item?.fileList?.map((item,index) => { 
                                        return (
                                            <div class="flex items-center mx-1">
                                                <div class="text-blue-light-100 cursor-pointer" onClick={() => { window.open(item) }}>
                                            附件{ index + 1 }
                                                </div>
                                            </div>
                                        )
                                    })
                                
                            }
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">事故经过:</div><span> { this.item.accidentDetails }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">是否住院:</div><span> { this.item.hospitalStatus === 1 ? '是' : '否' }</span></div>
                        <div class="flex-1 flex items-center"><div class=" text-right text-black-300 text-sm mr-2 ">就诊医院:</div><span> { this.item.visitHospital || '---' }</span></div>
                        <div class="flex-1 flex items-center opacity-0"><div class=" text-right text-black-300 text-sm mr-2 ">占位置的</div><span> 占位置的</span></div>
                    </div>
                    <div class="flex mt-4">
                        <div class="text-right text-black-300 text-sm mr-2">案件进展:</div>
                        <div>
                            <Timeline>
                                {this.type === 'long' ?
                                    this.item?.reportCaseResultList?.map((item,index) => { 
                                        return (
                                            <TimelineItem>
                                                <div class="flex items-center ">
                                                    <div>{ item.createTime }</div>
                                                    <div class="mr-4">{ item.remark }</div>
                                                    <div class="flex items-center text-red cursor-pointer" onClick={() => { this.onDelProgress(item.id)}}> <DeleteOutlined style="color:red" /> 删除</div>
                                                </div>
                                            </TimelineItem>
                                        )
                                    })
                                    :
                                    this.item?.results?.map((item) => { 
                                        return (
                                            <TimelineItem>
                                                <div class="flex items-center ">
                                                    <div>{ item.createTime }</div>
                                                    <div class="mr-4">{item.reportRemark}</div>
													
                                                    <div class="flex items-center text-red cursor-pointer" onClick={() => { this.onDelProgress(item.id)}}> <DeleteOutlined style="color:red" /> 删除</div>
                                                </div>
                                            </TimelineItem>
                                        )
                                    })
                                }
                            </Timeline>
                        </div>
                    </div>
                </div>
            </>
        ) }
}
export default toNative<{ type: string,  item:LongInsuranceCaseListDto<ReportCaseResultDto>}, {deleteChange: () => void}>(TableDetailView)